<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-upload-list--picture .el-upload-list__item {
            width: 200px;
            display: inline-block;
            margin-right: 10px;
        }

        .el-upload-list__item-name {
            margin-right: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <p style="border-left: 2px solid #0e90d2;padding-left: 20px;">新建任务</p>
    <hr style="border: 1px solid #ebeef5;"/>
    <div>
        <div class="el-col-sm-12">
            <el-form ref="form" :model="form" label-width="7em">
                <el-form-item label="任务描述">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="form.describe">
                    </el-input>
                </el-form-item>
                <el-form-item label="设置时间">
                    <el-date-picker
                            v-model="form.data1"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                    -
                    <el-date-picker
                            v-model="form.data2"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-dropdown trigger="click">
				      <span class="el-dropdown-link">
				        <el-input v-model="form.name" style="width: 220px;"></el-input>
				      </span>
                        <el-dropdown-menu slot="dropdown" style="padding:10px;">
                            <el-input v-model="form.bb" style="width: 200px;" placeholder="搜索成员"
                                      size="small"></el-input>
                            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" node-key="id"
                                     :default-expanded-keys="[1, 2]"
                                     style="max-height: 220px;overflow: auto;"></el-tree>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-form-item>
                <el-form-item label="是否重复">
                    <el-select v-model="form.region" placeholder="请选择" clearable>
                        <el-option label="不重复" value="0"></el-option>
                        <el-option label="工作日" value="1"></el-option>
                        <el-option label="工作日（含周末）" value="2"></el-option>
                        <el-option label="每周" value="3"></el-option>
                        <el-option label="每月" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList2"
                            list-type="picture">
                        <i class="el-icon-picture" style="font-size: 18px;"></i>
                        &nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="onSubmit" size="small">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                taskName: sessionStorage.getItem("taskName"),
                taskDescribe: '',
                fileList2: [{
                    name: 'foodfoodfood.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                form: {
                    describe: '给客户打电话',
                    bb: '',
                    name: '',
                    region: '',
                    data1: '',
                    date2: '',
                    type: [],
                },
                data: [{
                    id: 1,
                    label: '杰队',
                    children: [{
                        id: 11,
                        label: '未分配部门',
                        children: [{
                            id: 111,
                            label: '张伟',
                            noChildren: true
                        }, {
                            id: 112,
                            label: '王小明',
                            noChildren: true
                        }]
                    }]
                }, {
                    id: 2,
                    label: '刘队',
                    children: [{
                        id: 21,
                        label: '分配部门1',
                    }, {
                        id: 22,
                        label: '分配部门2',
                    }]
                }, {
                    id: 3,
                    label: '王队',
                    children: [{
                        id: 31,
                        label: '分配部门3',
                    }, {
                        id: 32,
                        label: '分配部门4',
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            taskSave: function (event) {
                this.showTask = !this.showTask;
                this.form.describe = event.target.innerText;
            },
            handleNodeClick: function (data, event) {
                console.log(data);
                if (event.data.noChildren) {
                    this.form.name = data.label;
                }
            },
            handleRemove: function (file, fileList) {
                console.log(file, fileList);
            },
            handlePreview: function (file) {
                console.log(file);
            },
            onSubmit: function () {
                this.$message({
                    showClose: true,
                    message: '操作成功',
                    type: 'success'
                });
                setTimeout(function () {
                    window.parent.document.getElementById("mainframe").setAttribute('src', 'detail.html')
                }, 2000)
            }
        }
    })
</script>
</body>
</html>
